const table = document.querySelector('.list ')
const total = document.querySelector('.total')
// 封装渲染页面
const getStudentList = async () => {
  const { data: res } = await axios({
    url: 'http://ajax-api.itheima.net/students',
  })
  // console.log(res.data);
  const htmlStr = res.data
    .map((item) => {
      return `<tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender === 0 ? '男' : '女'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province + item.city + item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"
        ><i class="bi bi-pen"data-id="${item.id}"></i
      ></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${
        item.id
      }"></i></a>
    </td>
  </tr>`
    })
    .join('')
  table.innerHTML = htmlStr
  total.innerHTML = res.data.length
}
getStudentList()

const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
// 获取提交按钮元素
const submitBtn = document.querySelector('#submit')
// 获取表单元素
const form = document.querySelector('#form')
// 获取添加按钮元素
const addBtn = document.querySelector('#openModal')

// 获取省市区
const initCity = async () => {
  // 获取省份数据
  const { data: res } = await axios({
    url: 'http://hmajax.itheima.net/api/province',
  })
  // console.log(res.list);
  // 渲染省份下拉框
  const provinceStr = res.list
    .map((item) => {
      return `<option value="${item}">--${item}--</option>`
    })
    .join('')
  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`

  // 给省份下拉框改变事件
  ps.addEventListener('change', async function () {
    // 如省份发生变化 则城市和地区的下拉框回复默认状态
    cs.innerHTML = `<option value="">--城市--</option>`
    as.innerHTML = `<option value="">--地区--</option>`

    // 如果省份内容为空则不发请求
    if (!ps.value) return
    // 获取城市数据
    const { data: res } = await axios({
      url: 'http://ajax-api.itheima.net/api/city',
      params: {
        pname: ps.value,
      },
    })
    // console.log(res.data)

    // 渲染城市下拉框的option
    const cityStr = res.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

    // 给城市下拉框改变事件
    cs.addEventListener('change', async function () {
      // 城市只要变换，地区还原默认值
      as.innerHTML = `<option value="">--地区--</option>`
      // 如果省份内容为空则不发请求
      if (!cs.value) return
      // 获取城市对应的地区数据
      const { data: res } = await axios({
        url: 'http://ajax-api.itheima.net/api/area',
        params: { pname: ps.value, cname: cs.value },
      })
      // console.log(res);

      // 渲染地区下拉框的option
      const areaStr = res.data
        ?.map((item) => {
          return `<option value="${item}">--${item}--</option>`
        })
        .join('')
      as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    })
  })
}
initCity()

// 绑定点击事件
addBtn.addEventListener('click', function () {
  // 添加自定义属性
  modalBox.dataset.id = 'add'
  // 添加内容
  modalBox.querySelector('.modal-title').innerHTML = '添加学员'
  // 点击添加表单会重置表单
  form.reset()
  // 点击显示添加框
  modal.show()
})

// 添加   绑定点击确认提交按钮
submitBtn.addEventListener('click', async function () {
  // 获取表单全部内容
  const data = serialize(form, { hash: true })
  // 组号限制在1-8之间
  if (data.group < 1 || data.group > 8) return alert('数组号为1-8')
  // 数据类型转换
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group

  // 如果id为add就是添加 否则就是修改
  if (modalBox.dataset.id === 'add') {
    // 添加数据
    const { data: res } = await axios({
      url: 'http://ajax-api.itheima.net/students',
      method: 'post',
      data,
    })
    // 关闭modal层
    modal.hide()
    // 并且重新渲染
    getStudentList()
    // 提示添加成功
    alert(res.message)
  } else {
    const { data: res } = await axios({
      url: `http://ajax-api.itheima.net/students/` + modalBox.dataset.id,
      method: 'put',
      data,
    })
    // 关闭modal层
    modal.hide()
    // 并且重新渲染
    getStudentList()
    alert(res.message)
  }
})

// 修改删除事件委托
table.addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-pen')) {
    // 获取学生id
    const id = e.target.dataset.id
    modalBox.dataset.id = id
    // 发起获取学生详情的请求
    const { data: res } = await axios({
      url: `http://ajax-api.itheima.net/students/` + id,
    })

    //获取所有带有name属性的表单
    const nodeList = modalBox.querySelectorAll('[name]')

    // 循环遍历表单框集合    集中赋值
    nodeList.forEach((item) => {
      // 如果是性别，判断
      if (item.name === 'gender') {
        // 如果是1则为男，0为女
        res.data[item.name]
          ? (modalBox.querySelector('#cb01').checked = true)
          : (modalBox.querySelector('#cb02').checked = true)
      }
      // 给每一个表单框赋值
      item.value = res.data[item.name]
    })

    // 获取城市列表
    const { data: cityData } = await axios({
      url: 'http://ajax-api.itheima.net/api/city',
      params: { pname: res.data.province },
    })
    // console.log(res.data.province);

    // console.log(cityData);
    // 渲染城市下拉框选项
    const cityStr = cityData.data
      ?.map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

    // 给城市下拉框赋值
    cs.value = res.data.city

    // 获取地区列表
    const { data: areaData } = await axios({
      url: 'http://ajax-api.itheima.net/api/area',
      params: {
        pname: res.data.province,
        cname: res.data.city,
      },
    })

    // 渲染地区下拉框选项
    const areaStr = areaData.data
      ?.map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')

    as.innerHTML = `<option value="">--地区--</option>${areaStr}`

    // 给地区下拉框赋值
    as.value = res.data.area

    //设置modal层自定义属性，把学生ID给到modal层自定义属性
    modalBox.dataset.id = id
    modalBox.querySelector('.modal-title').innerHTML = '修改学员信息'

    // 打开modal层
    modal.show()
  }

  // 删除数据
  if (e.target.classList.contains('bi-trash')) {
    const id = e.target.dataset.id
    const a = await axios({
      url: `http://ajax-api.itheima.net/students/` + id,
      method: 'DELETE',
    })
    getStudentList()
    alert('删除成功')
  }
})
